<template>
  <div class="ranking">
    <div class="banxin">
      <!-- 标题 -->
      <div class="ranking-bt">
        <van-icon name="arrow-left" class="icon-y" @click="jumpHome" />
        <b>排行榜</b>
        <span>定制首页榜单</span>
      </div>
      <!-- 榜单推荐 -->
      <div class="ranking-tj">
        <p>榜单推荐</p>
        <div class="ranking-tj-lz">
          <div v-for="item in bdxq" :key="item.id">
            <img :src="item.coverImgUrl" alt="" @click="toDetail(item.id)" />
            <p>{{ item.name }}</p>
            <span>{{ item.updateFrequency }}</span>
            <i><van-icon name="play-circle-o" /></i>
          </div>
        </div>
      </div>
      <!-- 官方榜 -->
      <div class="ranking-gf">
        <p>
          <i><van-icon name="hot-o" /></i> 官方榜
        </p>
        <div class="ranking-gf-bd" v-for="(i, ii) in gfbdxq" :key="i.id">
          <div>
            <b style="font-size: 14px; display: block">{{ i.name }}</b
            ><img :src="i.coverImgUrl" alt="" @click="toDetail(i.id)" />
          </div>
          <nav>
            <div v-if="allBangDan[ii]">
              <p
                v-for="(item, index) in allBangDan[ii].playlist.tracks.slice(
                  0,
                  3
                )"
                :key="item.id"
              >
                <i>{{ index + 1 }}.</i><span>{{ item.name }}</span
                ><strong>-{{ item.ar[0].name }}</strong>
              </p>
            </div>
            <p v-else>暂无</p>
          </nav>
        </div>
      </div>
      <!-- 精选榜 -->
      <div class="ranking-jx">
        <p>精选榜</p>
        <div class="ranking-jx-lb">
          <div v-for="b in jxbxq" :key="b.id">
            <img :src="b.coverImgUrl" alt="" @click="toDetail(b.id)" />
            <p>{{ b.name }}</p>
            <span>{{ b.updateFrequency }}</span>
            <i><van-icon name="play-circle-o" /></i>
          </div>
        </div>
      </div>
      <!-- 曲风榜 -->
      <div class="ranking-jx">
        <p>曲风榜</p>
        <div class="ranking-jx-lb">
          <div v-for="c in qfbxq" :key="c.id">
            <img :src="c.coverImgUrl" alt="" @click="toDetail(c.id)" />
            <p>{{ c.name }}</p>
            <span>{{ c.updateFrequency }}</span>
            <i><van-icon name="play-circle-o" /></i>
          </div>
        </div>
      </div>
      <!-- 全球榜 -->
      <div class="ranking-jx">
        <p>全球榜</p>
        <div class="ranking-jx-lb">
          <div v-for="d in qqbxq" :key="d.id">
            <img :src="d.coverImgUrl" alt="" @click="toDetail(d.id)" />
            <p>{{ d.name }}</p>
            <span>{{ d.updateFrequency }}</span>
            <i><van-icon name="play-circle-o" /></i>
          </div>
          <div></div>
        </div>
        <div class="wuyong"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { loadRankingAPI } from "../services/RankList";
import { loadPresByIdAPI } from "../services/RankList";
export default {
  data() {
    return {
      qb: [],
      bdxq: [],
      gfbdxq: [],
      jxbxq: [],
      qfbxq: [],
      qqbxq: [],
      products: [],
      ida: [],
      allBangDan: [],
    };
  },
  async created() {
    const resbdxq = await loadRankingAPI();
    this.qb = resbdxq.list;
    this.bdxq = resbdxq.list.splice(0, 3);
    this.gfbdxq = resbdxq.list.splice(0, 6);
    this.jxbxq = resbdxq.list.splice(0, 9);
    this.qfbxq = resbdxq.list.splice(0, 9);
    this.qqbxq = resbdxq.list.splice(0, 11);
    // console.log(this.bdxq);
    this.gfbdxq.map((item) => {
      this.ida.push(item.id);
    });

    const allBDGQ = this.ida.map((item) => {
      return loadPresByIdAPI(item);
    });
    Promise.all(allBDGQ).then((res) => {
      // console.log(res);
      this.allBangDan = res;
    });
  },

  methods: {
    toDetail(id) {
      this.$router.push({
        name: "RankListDetail",
        query: { id },
      });
      // console.log(id);
    },
    jumpHome() {
      this.$router.push({ name: "Home" });
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;

  .banxin {
    width: 93vw;
    margin: auto;
    .ranking-bt {
      height: 3rem;
      display: flex;
      box-sizing: border-box;
      align-items: flex-end;
      justify-content: space-between;
      .icon-y {
        width: 23%;
        font-size: 20px;
      }
      b {
        width: 54%;
        text-align: center;
        font-weight: 600;
        font-size: 18px;
      }
      span {
        text-align: center;
        width: 23%;
        font-size: 12px;
        display: inline-block;
        border: 1px solid black;
        border-radius: 10px;
      }
    }
    .wuyong {
      width: 100%;
      height: 80px;
    }
    // 榜单推荐
    .ranking-tj {
      margin-top: 2rem;
      background-color: white;
      height: 10rem;
      box-sizing: border-box;
      padding: 0.7rem 0.7rem;
      border-radius: 15px;
      box-shadow: 0px -1px 0px 0px #ececec, -1px 0px 0px 0px #ececec,
        1px 0px 0px 0px #ececec, 0px 1px 0px 0px #ececec;
      p {
        height: 20%;
        font-weight: 600;
        font-size: 16px;
      }
      .ranking-tj-lz {
        height: 80%;
        display: flex;
        justify-content: space-between;
        div {
          position: relative;
          width: 30%;
          img {
            width: 100%;
            height: 6rem;
            border-radius: 10px;
          }
          p {
            font-weight: normal;
            font-size: 12px;
            height: 2rem;
          }
          span {
            text-align: center;
            font-size: 12px;
            box-sizing: border-box;
            border: 1px solid #96959552;
            border-radius: 10px;
            width: 4.5rem;
            display: inline-block;
            position: absolute;
            top: 3px;
            right: 2px;
            color: white;
            background-color: #96959552;
          }
          i {
            position: absolute;
            bottom: 8px;
            right: 2px;
            color: white;
          }
        }
      }
    }
    //官方榜
    .ranking-gf {
      margin-top: 2rem;
      background-color: white;
      box-sizing: border-box;
      padding: 0.7rem 0.7rem;
      border-radius: 15px;
      box-shadow: 0px -1px 0px 0px #ececec, -1px 0px 0px 0px #ececec,
        1px 0px 0px 0px #ececec, 0px 1px 0px 0px #ececec;
      p {
        height: 2.5rem;
        font-weight: 600;
        font-size: 16px;
        i {
          display: inline-block;
          color: white;
          width: 1.2rem;
          height: 1.2rem;
          background-color: #ee2347e0;
          text-align: center;
          border-radius: 50%;
          line-height: 1.2rem;
        }
      }
      .ranking-gf-bd:nth-child(2n) {
        background-color: rgba(0, 128, 0, 0.548);
      }
      .ranking-gf-bd {
        margin-bottom: 1rem;
        font-weight: 500;
        height: 8rem;
        background-color: rgb(253, 150, 150, 0.76);
        border-radius: 15px;
        box-sizing: border-box;
        padding: 15px 5px 20px 15px;
        div {
          float: left;
          width: 35%;
          height: 100%;
          b {
            font-weight: 600;
            height: 20%;
            font-size: 20px;
            color: red;
          }
          img {
            margin-top: 0.5rem;
            width: 67%;
            height: 70%;
            border-radius: 10px;
          }
        }
        nav {
          float: right;
          width: 65%;
          height: 100%;
          font-size: 14px;
          font-weight: normal;
          p {
            white-space: nowrap;
            width: 11rem;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          i {
            display: inline;
            background-color: transparent;
            font-style: normal;
            color: black;
            font-weight: normal;
          }
          strong {
            color: #747474;
            font-weight: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.005);
            text-rendering: optimizeLegibility;
          }
          span {
            font-weight: normal;
          }
        }
      }
    }
    //精选榜
    .ranking-jx {
      margin-top: 2rem;
      background-color: white;
      box-sizing: border-box;
      padding: 0.7rem 0.7rem;
      border-radius: 15px;
      box-shadow: 0px -1px 0px 0px #ececec, -1px 0px 0px 0px #ececec,
        1px 0px 0px 0px #ececec, 0px 1px 0px 0px #ececec;
      p {
        height: 20%;
      }
      .ranking-jx-lb {
        margin-top: 1rem;
        height: 80%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        div {
          width: 30%;
          position: relative;
          img {
            width: 100%;
            height: 6rem;
            border-radius: 10px;
          }
          p {
            font-size: 12px;
            font-style: normal;
            height: 2rem;
          }
          span {
            text-align: center;
            font-size: 12px;
            box-sizing: border-box;
            border: 1px solid #96959552;
            border-radius: 10px;
            width: 4.5rem;
            display: inline-block;
            position: absolute;
            top: 3px;
            right: 2px;
            color: white;
            background-color: #96959552;
          }
          i {
            position: absolute;
            bottom: 20px;
            right: 2px;
            color: white;
          }
        }
      }
    }
  }
}
</style>
